<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="A demo of OwlCarousel2 which's nav on side">
	<meta name="keywords" content="owl, owl carousel2, demo, nav">
	<meta name="author" content="Steper Kuo">
	<title>Demo: Owl carousel2 - mousewheel</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<link rel="stylesheet" href="styles/owl.carousel.min.css">
	<link rel="stylesheet" href="styles/owl-navOnSide.css">
	<style data-toggle="previewCode" data-target="#demoWrap" data-collapse="on" type="text/css">
		/* Demo's CSS here */
		.owl-carousel .item
		{
			height: 10rem;
			background: #4DC7A0;
			padding: 1rem;
		}
	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>

<main>

	<!-- Demos -->
	<section id="demo">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<div data-toggle="previewCode" data-target="#demoWrap" data-collapse="on">
					<p>Mouse wheel to slide item</p>
					<!--Demo's html here-->
					Owl Items Count:
					<p class="test-links">
						<a href="?apply=applyItemsDom(0)">Init 0</a>
						<a href="?apply=applyItemsDom(1)">Init 1</a>
						<a href="?apply=applyItemsDom(2)">Init 2</a>
						<a href="?apply=applyItemsDom(3)">Init 3</a>
						<a href="?apply=applyItemsDom(4)">Init 4</a>
					</p>
					<p class="buttons">
						<button onclick="updateOwl(0);">Replace 0</button>
						<button onclick="updateOwl(1);">Replace 1</button>
						<button onclick="updateOwl(2);">Replace 2</button>
						<button onclick="updateOwl(3);">Replace 3</button>
						<button onclick="updateOwl(4);">Replace 4</button>
					</p>
					<div id="owlBasicBar" class="owl-carousel">
						<div class="item">
							<h4>1</h4>
						</div>
						<div class="item">
							<h4>2</h4>
						</div>
						<div class="item">
							<h4>3</h4>
						</div>
						<div class="item">
							<h4>4</h4>
						</div>
						<div class="item">
							<h4>5</h4>
						</div>
						<div class="item">
							<h4>6</h4>
						</div>
						<div class="item">
							<h4>7</h4>
						</div>
						<div class="item">
							<h4>8</h4>
						</div>
					</div>
				</div>
				<h3 id="overview">Overview</h3>
				<!--Introduction here-->
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<!-- Script Demo *** JS -->
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>

<script type="text/javascript" src="scripts/owl.carousel.custom.mousewheel.slideone.js"></script>
<!--<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>-->

<script data-toggle="previewCode" data-target="#demoWrap" type="text/javascript">
	function initMouseWheelOwlCarousel(selector, carouselConfig)
	{
		// Auto mousewheel configs
		var $owl = null,
				initRefresh = true,
				isCarouselMouseWheelOn = false;
		var mouseWheelEvent = function (e) {
					if (e.deltaY > 0)
					{
						$owl.trigger('next.owl');
					}
					else
					{
						$owl.trigger('prev.owl');
					}
					e.preventDefault();
				},
				bindCarouselMouseWheel = function (isBindOn) {
					$owl[!!isBindOn ? 'on' : 'off']('mousewheel', '.owl-stage', mouseWheelEvent);
					isCarouselMouseWheelOn = !!isBindOn;
				},
				activeEPGList = function (event) {
					var activeOwlItems = event.currentTarget.querySelectorAll('.owl-item.active');
					if (activeOwlItems.length === 0)
					{
						initRefresh = true;
					}
					else
					{
						// Bind on/off mousewheel
						var carouselConfigMargin = carouselConfig.margin || 0,
								activeItemsWidth = [].reduce.call(activeOwlItems, (accumulator, currentItem) => {
									return accumulator + currentItem.clientWidth + carouselConfigMargin;
								}, 0),
								isActiveItemsWidthMoreThanContainer = (activeItemsWidth - event.currentTarget.clientWidth - carouselConfigMargin) > 0;
						if (event.currentTarget.querySelectorAll('.owl-item').length > activeOwlItems.length && !isActiveItemsWidthMoreThanContainer)
						{
							isActiveItemsWidthMoreThanContainer = true;
						}
						if (!isCarouselMouseWheelOn && isActiveItemsWidthMoreThanContainer)
						{
							bindCarouselMouseWheel(true);
						}
						else if (isCarouselMouseWheelOn && !isActiveItemsWidthMoreThanContainer)
						{
							bindCarouselMouseWheel(false);
						}
					}
				},
				refreshedCallback = (event) => {
					if (initRefresh)
					{
						initRefresh = false;
						activeEPGList(event);
					}
				};
		$owl = $(selector).owlCarousel(carouselConfig)
				.on('refreshed.owl.carousel', refreshedCallback)
				.on('translated.owl.carousel', activeEPGList)
				.on('resized.owl.carousel', activeEPGList);
		bindCarouselMouseWheel(true);
		$owl.trigger('refresh.owl.carousel');

		return $owl;
	}
	// Demo's JS here
	var $globalCarousel = null;
	window.addEventListener("load", function () {
		var carouselConfig = {
			loop: false,
			nav: true,
			navText: ['', ''],
			dots: false,
			slideBy: 'page',
			margin: 10,
			responsive: {
				0: {
					items: 1
				},
				600: {
					items: 2
				},
				960: {
					items: 3
				},
				1200: {
					items: 3
				},
				2000: {
					items: 3
				}
			}
		};
		$globalCarousel = initMouseWheelOwlCarousel('.owl-carousel', carouselConfig);
	}, false);

	// For test case
	function updateOwl(count)
	{
		$globalCarousel.trigger('replace.owl.carousel', initOwlItemsDom(count).join(''))
				.trigger('translated.owl.carousel')
				.trigger('refresh.owl.carousel');
	}

	// For test case
	function initOwlItemsDom(count)
	{
		var listDomArray = [],
				template = '<div class="item"><h4>index</h4></div>';
		for (var i = 0; i < count; i++)
		{
			listDomArray.push(template.replace('index', i + 1));
		}
		return listDomArray;
	}

	function applyItemsDom(count)
	{
		// ?apply=initState(1, "abc", {"a": true}
		document.getElementById('owlBasicBar').innerHTML = initOwlItemsDom(count).join('');
	}
</script>

</body>
</html>